<template>
   <div class="collection-container">
     <div class="collection-content">
       <nav-bar>
         <div class="left" slot="left"  @click="goBack()">
           <i class="iconfont icon-fanhui"></i>
         </div>
         <div slot="center">收藏列表</div>
       </nav-bar>


         <van-list
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
             @load="onLoad"

         >

             <van-card
                 v-for="(item,index) in list"
                 :key="index"
                 :num="item.goods.num"
                 :price="item.goods.price"
                 :desc="item.goods.description"
                 :title="item.goods.title"
                 :thumb="item.goods.cover_url"
             />




         </van-list>

     </div>
   </div>
</template>

<script>
import {getAllCollection} from "../../api/profile/profile";
import NavBar from '../../components/nav-bar/Nav-Bar'
import {Toast} from "vant";
export default {
  name: "myConlection",
  components:{
    NavBar
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      collectionList:[],
      pageNum:0,
      pageSize:10
    };
  },
  activated() {

  },
  methods: {
    onLoad() {
      let timer = setTimeout(()=>{
        this.pageNum ++
        this.getCollection()
        clearTimeout(timer)
      },500)
    },
     // 获取收藏数据
    async getCollection(){
      const res = await getAllCollection(this.pageNum)
      if(res && res.status === 200){
        this.loading = false
        let listInfo = res.data.data
        if(listInfo){
          this.list = this.list.concat(listInfo)
          if(listInfo.length < this.pageSize){
            this.finished = true
          }
        }else {
          this.finished = true
        }

        console.log(this.collectionList);
      }else {
        Toast.fail('获取收藏失败')
      }
    },
    goBack(){
      this.$router.go(-1)
    },
  },

}
</script>

<style scoped lang="css">

.collection-container{
  width: 100%;
  height: 100%;
}
.collection-content{
  padding-top: 45px;
}
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
</style>